<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>接口调用数据展示</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  <div class="header">
      <div class='container'>
          <p>深度视觉 · <span>接口调用统计</span></p>
      </div>
  </div>
    <div class='main'>
		<div class='container'>
            <div class="row">
                <div class="col-sm-2">
                    <div class="jk-menu" data-spy="affix" data-offset-top="80">
                    </div>
                </div>
                <div class="col-sm-10">
                    <div class="chart">
                        <div id="chart" style="height:400px"></div>
                    </div>
                </div>
            </div>

        </div>
	</div>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/echarts-all.js"></script>
    <script src="js/main.js"></script>
    <script>
        var date = new Date()
        console.log(date.getHours());
        var myChart = echarts.init(document.getElementById('chart'));
        option = {
            title : {
                text: '',
                subtext: ''
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:[]
            },
            toolbox: {
                show : true,
                feature : {
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            xAxis : [
                {
                    name:'时间点/时',
                    type : 'category',
                    boundaryGap : false,
                    axisLabel:{
                        show:true,
                        interval:0
                    },
                    data : ['00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23']
                }
            ],
            yAxis : [
                {
                    name:'统计次数/次',
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'调用次数',
                    type:'line',
                    data:[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
                }
            ]
        };
        $(".jk-menu").on('click','a',function(){
            $(this).addClass('on').siblings().removeClass('on');
            api_type = $(this).text();
            replaceParamVal('api_type',api_type);
            getdata(req_day,api_type);
        });
        if(req_day == null || req_day == '' || api_type == null || api_type ==''){
            window.location.href= 'index.html';
        }
        getdata(req_day,api_type);
		option.title.text = req_day;
        function getdata(req_day,api_type){
            $.ajax({
                type:'get',
                url:url,
                data:{
                    type:'querytypeDateInterface',
                    req_day:req_day,
                    api_type:api_type
                },
                success:function(data){
                    console.log(data)
                    if(data.data.length == 0){
                        myChart.setOption(option);
                        return;
                    }
					
                    for(var i = 0;i<data.data.length;i++){
                        var t = parseInt(data.data[i].req_date.slice(10,13));
                        option.series[0].data[t] = data.data[i].sum;
                    }
                    myChart.setOption(option);
                },
                error: function(xhr, ajaxOptions, thrownError) {

                }
            });
        }
        window.onresize = function () {
            myChart.resize();
        };
    </script>
  </body>
</html>